<!-- 订单基本信息组件 -->
<template>
  <div class="order-base-info">
    <el-row>
      <el-col
        :span="8"
        :key="item.label"
        v-for="item in dataList">
        <el-tooltip
          class="item"
          effect="dark"
          :content="item.label"
          placement="top">
          <span class="label">{{ item.label }}</span>
        </el-tooltip>
        <span
          class="value"
          v-if="item.label==='订单状态'">{{ orderStatus[Number(item.value) - 1].label }}</span>
        <span
          class="value"
          v-else-if="item.label==='订单金额'">{{ item.value | getFormatterPrice }}</span>
        <el-tooltip
          class="item"
          effect="dark"
          :content="item.value + '' "
          placement="top-start"
          v-else>
          <span class="value">{{ item.value }}</span>
        </el-tooltip>

      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getFormatterPrice } from '@const/filter'
import { WHOLESALE_ORDER_STATUS } from './const'
export default {
  props: {
    baseInfo: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      dataList: this.baseInfo,
      orderStatus: WHOLESALE_ORDER_STATUS
    }
  },
  watch: {
    baseInfo (val) {
      this.dataList = val
    }
  },
  filters: {
    getFormatterPrice
  }
}
</script>

<style lang="less" scoped>
  .order-base-info {
    .el-row {
      margin-bottom: 10px;
    }

    .el-col {
      overflow: hidden;
      line-height: 20px;
      white-space: nowrap;
      padding: 4px 6px 4px 0;
      text-overflow: ellipsis;

      span:first-child {
        width: 100px;
        padding-right: 6px;
        text-align: right;
        overflow: hidden;
        display: inline-block;
        white-space: nowrap;
        text-overflow: ellipsis;
        vertical-align: middle;
        color: rgba(167, 177, 199, 1);
      }

      span:last-child {
        width: 200px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
        color: rgba(38, 52, 76, 1);
        vertical-align: middle;
      }
    }
  }
</style>
